<template>
  <div class="album" ref="albumRef" v-loading="isLoading">
    <div class="header">
      <div class="header-left">
        <img :src="picUrl" alt="">
        <div class="mark"/>
      </div>
      <div class="header-right">
        <div class="title">
          <span class="album-box">专辑</span>
          <span class="title-name">{{name}}</span>
        </div>
        <ul class="fun">
          <li class="turn-red" @click="selectAllSongs">
            <i class="iconfont iconbofang"></i>
            <span class="all-bofang">播放全部</span>
            <i class="iconfont iconicon-test"></i>
          </li>
          <li>
            <i class="iconfont iconshoucang1"></i>
            <span>收藏</span>
            <span v-if="subCount">({{subCount}})</span>
          </li>
          <li>
            <i class="iconfont icondownload"></i>
            <span>VIP下载</span>
          </li>
          <li>
            <i class="iconfont iconfenxiang"></i>
            <span v-if="shareCount">{{shareCount}}</span>
          </li>
        </ul>
        <div class="creator" v-if="artists.length">
          <span>歌手:  </span>
          <template v-for="item of artists" :key="item">
            <span class="creator-name">{{item.name}}</span>
          </template>
        </div>
        <div class="time">
          <span>时间:  </span>
          <span style="margin-left: 5px;">{{publishTime}}</span>
        </div>
      </div>
    </div>
    <Tabs v-model="tabsActive">
      <TabPane label="歌曲列表" name="songlist">
        <SongItme :songsList="songsList"/>
      </TabPane>
      <TabPane :label="`评论(${commentCount})`" name="comment">
        <div class="comment">
          <UsualComment/>
          <HotsComment :hotsCommentsList='hotsComment' />
          <Comment
            ref="commentRef"
            :commentsList="lastestComment"
            :totals="totals"
          />
          <Page
            :limit="limit"
            :offset="offset"
            :totals="totals"
            @changeOffset="changeOffset"
          />
        </div>
      </TabPane>
      <TabPane label="专辑详情" name="albumDetail">
        <div class="album-description">
          <h1 class="desc-title">专辑介绍</h1>
          <div class="desc" v-html="description"/>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script lang="ts">
import { getAlbumDetail, getAlbumComment, getLastestAlbumComment } from '@/api/album'
import { onMounted, ref, reactive, toRefs, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import SongItme from '@/components/songItem/Index.vue'
import UsualComment from '@/components/usualComment/index.vue'
import HotsComment from '@/components/hotsComment/index.vue'
import Comment from '@/components/comment/index.vue'
import Page from '@/components/page/index.vue'
import { player } from '@/store/modules/player'

export default {
  name: 'index',
  components: {
    SongItme,
    UsualComment,
    HotsComment,
    Comment,
    Page
  },
  setup () {
    const route = useRoute()
    const isLoading = ref<boolean>(false)
    const commentRef = ref<HTMLElement | null>(null)
    const albumRef = ref<HTMLElement | null>(null)
    let albumData = reactive({
      id: -1,
      name: '',
      artists: [],
      publishTime: '',
      subCount: 0,
      shareCount: 0,
      commentCount: 0,
      picUrl: '',
      aliasStr: '',
      description: ''
    })
    const lastestComment = ref([])
    const hotsComment = ref([])
    const totals = ref<number>(0)
    const limit = ref(30)
    const offset = ref(0)
    const songsList = ref([])
    const tabsActive = ref('songlist')
    const init = async () => {
      isLoading.value = true
      try {
        const { album, songs } = await getAlbumDetail(route.params.id)
        const comment = await getAlbumComment({ id: route.params.id, limit: limit.value })
        albumData = Object.assign(albumData, album)
        songsList.value = songs
        lastestComment.value = comment.commentsList
        hotsComment.value = comment.hotCommentsList
        totals.value = comment.total
      } catch (e) {
        isLoading.value = false
        console.log(e)
      }
      isLoading.value = false
    }
    const changeOffset = async (num) => {
      offset.value = num
      try {
        const { commentsList } = await getLastestAlbumComment({ id: route.params.id, limit: limit.value, offset: offset.value })
        lastestComment.value = commentsList
        nextTick(() => {
          // @ts-ignore
          albumRef.value.scrollTop = commentRef.value.$el.offsetTop
        })
      } catch (e) {
        console.log(e)
      }
    }
    const selectAllSongs = () => {
      const playlist = songsList.value.length ? songsList.value.map(item => item.id) : []
      if (playlist.length) {
        player.changeSonglist({ list: playlist, id: playlist[0] })
      }
    }
    onMounted(() => {
      offset.value = 0
      init()
    })
    return {
      isLoading,
      tabsActive,
      songsList,
      hotsComment,
      lastestComment,
      limit,
      offset,
      totals,
      commentRef,
      albumRef,
      ...toRefs(albumData),
      selectAllSongs,
      changeOffset
    }
  }
}
</script>

<style lang="scss" scoped>
.album {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 100%;

  .header {
    padding: 20px 18px 20px 20px;
    display: flex;
    flex-direction: row;

    .header-left {
      position: relative;

      >img {
        width: 180px;
        height: 180px;
        margin-right: 35px;
        border-radius: 5px;
      }

      .mark {
        position: absolute;
        top: -10px;
        left: 0;
        width: 220px;
        height: 200px;
        background-image: url('../../assets/images/album.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 10px;
        z-index: -1;
      }
    }

    .header-right {
      flex: 1;
      box-sizing: border-box;
      padding-left: 15px;
      font-size: 13px;
      color: #353535;

      .title {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin-bottom: 8px;

        .album-box {
          background-color: #fdf5f5;
          border: 1px solid #ec4141;
          color: #ec4141;
          padding: 3px 5px;
          border-radius: 3px;
          margin-right: 8px;
        }

        .title-name {
          font-size: 22px;
          font-weight: bold;
          color: #000000;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          overflow: hidden;
          -webkit-box-orient: vertical;
          line-height: 1.4;
        }
      }

      .fun {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-bottom: 18px;

        >li {
          display: flex;
          align-items: center;
          padding: 5px 20px;
          color: #666666;
          height: 30px;
          box-sizing: border-box;
          font-size: 15px;
          border: 1px solid #D0D0D0;
          border-radius: 14px;
          cursor: pointer;

          >i {
            padding-right: 5px;
          }

          &:hover {
            background-color: #e9e9e9;
          }
        }

        .turn-red {
          color: #f2f3f4;
          background-color: #ec4141;
          padding: 5px 10px;

          .all-bofang {
            padding-right: 15px;
            line-height: 20px;
            position: relative;
            display: inline-block;
            height: 20px;

            &:before {
              content: '';
              position: absolute;
              top: -5px;
              right: 7px;
              height: 30px;
              width: .5px;
              background-color: #cab6b6;
              z-index: 6;
            }
          }

          &:hover {
            background-color: #cc3232;
          }
        }

        li ~ li {
          margin-left: 20px;
        }
      }

      .creator {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .creator-name {
          color: #2957ec;
          max-width: 200px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          line-height: 1.4;
          padding-left: 5px;
          cursor: pointer;
        }
      }

      .time {

        .create-time {
          line-height: 1.4;
          padding-left: 5px;
        }
      }
    }
  }

  .comment {
    padding: 0 20px 20px 20px;
  }

  .album-description {
    padding: 0 20px 20px 20px;

    .desc-title {
      font-size: 14px;
      font-weight: bold;
      cursor: default;
      padding-left: 5px;
      margin-bottom: 10px;
    }

    .desc {
      white-space: pre-wrap;
      line-height: 2;
      font-size: 14px;
      color: #bdbdbd;
      padding-left: 20px;
    }
  }
}
</style>
